<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuding切换jQ</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.tabbed .heading').mouseover(function() {
		p = $(this).parent();
		pp = $(p).parent();
		ppp = $(pp).parent();
		$(p).addClass('active');
		$(p).siblings().removeClass('active');
		$(pp).next().remove();
		$(this).next().clone().appendTo(ppp);
	})
	$('.tabbed .active .heading').mouseover();
})
</script>
<style type="text/css">
li{list-style:none;}

div.tabbed { position:relative; }
div.tabbed ul.group { margin:0; padding:0; height:34px; display:block; border-left:1px solid #D5D5D5; position:relative; z-index:10; }
div.tabbed ul.group li.panel { background:#FFFFFF; float:left; height:32px; margin:0; padding:0; overflow:hidden; list-style:none; border:1px solid #D5D5D5; border-left:none; }
div.tabbed ul.group li.panel .tab { display:block; margin:0; padding:0 40px; line-height:32px; font-size:12px; color:#737373; font-weight:400; }
div.tabbed ul.group li.panel.active { background:#E3DFCC; border-bottom-color:#E3DFCC; }
div.tabbed ul.group li.panel.active .tab { font-weight:400; }
div.tabbed .content { background:#E3DFCC;display:block; padding:20px; border:1px solid #E1E1E1; margin-top:-34px; }
div.tabbed ul.group li.panel .content { display:none; }
</style>
</head>
<body>
<div class="tabbed ding" id="rcmd_hot">
  <ul class="group ding">
    <li class="panel active">
      <a class="heading" href="#"><span>标签1</span></a>
      <div class="content">
        <p style="padding:10px;"><a href="http://www.w3.org/">万维网联盟(W3C)</a>联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其"共享同一个万维网"的使命。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供更好的服务。 </p>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签2</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签2的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签3</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签3的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第八个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<div style="color:#F00;">此行文字仅作为Tabbed的高度参照</div>
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <em>Copyright ©</em> <a href="http://www.bubujie.net/" target="_blank">街工作室</a> 2008-2012 All Rights Reserved.
    </address>
  </div>
</div>
</body>
</html>
